<template>
    <el-form ref="formRef" :model="formData" :inline="true" label-width="120px" status-icon>

        <el-form-item label="出库类型">
            <el-select v-model="formData.ooType" placeholder="请选择出库类型">
                <el-option
                        v-for="item in ooTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="出库日期">
            <el-date-picker v-model="formData.ooDate" type="date" placeholder="请选择"/>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="formData.brief" :rows="1" type="textarea" placeholder="备注"/>
        </el-form-item>
    </el-form>
  <!--分割线-->
    <el-divider/>
  <!--调出抽屉按钮-->
    <el-button type="primary" @click="drawer = true">
        选择商品
    </el-button>

  <!--出库单表格-->
    <el-table :data="tableData" style="width: 100%" ref="productTableRef">
        <el-table-column fixed prop="productId" label="商品编号" width="80"/>
        <el-table-column fixed prop="productName" label="商品名称" width="150"/>
        <el-table-column prop="img" label="图片" width="80">
            <template #default="scope">
                <img :src="scope.row.img.split(',')[0]" width="50" height="50"/>
            </template>
        </el-table-column>
        <el-table-column prop="qty" label="出库数量" width="150">
            <template #default="scope">
                <el-input-number v-model="scope.row.qty" :min="1" :max="scope.row.inventory" size="small"/>
            </template>
        </el-table-column>

        <el-table-column prop="inventory" label="库存" width="100"/>

        <el-table-column prop="brief" label="备注" width="120">
            <template #default="scope">
                <el-input v-model="scope.row.brief" size="small"/>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
                <el-button type="primary" size="small" @click="deleteRow(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <el-button type="primary" @click="submitForm">
        保存出库单
    </el-button>

    <el-drawer v-model="drawer" direction="ltr" size="50%">
        <ProductPickVue v-model="selectProducts"></ProductPickVue>
    </el-drawer>
</template>


<script setup lang="ts">
import {ref, onMounted, reactive, watch} from 'vue'
import {ElMessage, dayjs} from 'element-plus'
import {ooApi, inventoryApi} from '@/api'
import ProductPickVue from '@/components/ProductPick.vue'
import {storeToRefs} from 'pinia'
import appStore from "@/store/appStore.ts";

const {oo_item_data} = storeToRefs(appStore())
const selectProducts = ref([])
const tableData: any = ref([])
const formData = reactive({
    ooDate: dayjs().add(1, 'day').format('YYYY-MM-DD'),
    brief: '',
    ooType: ''
})
const ooTypeOptions = ref([
    {
        value: '1',
        label: '销售出库',
    },
    {
        value: '2',
        label: '调拨出库',
    },
    {
        value: '3',
        label: '作废出库',
    },
])
const drawer = ref(false)
onMounted(() => {
    tableData.value = oo_item_data.value
})

const deleteRow = (scope: any) => {
    tableData.value.splice(scope.$index, 1)
}


watch(() => selectProducts.value, (newProduct, oldProduct) => {
    drawer.value = false
    newProduct.forEach((item: any) => {
        let existProduct = tableData.value.filter((tableItem: any) => item.id === tableItem.productId)
        if (existProduct.length == 0) {
            inventoryApi.select.call({productId: item.id}).then((res: any) => {
                if (res == null) {
                    ElMessage.error(item.name + '没有库存数据')
                    return
                }
                if(res.qty===0){
                    ElMessage.error(item.name + '库存量为0')
                    return
                }
                tableData.value.push({
                    productId: item.id,
                    productName: item.name,
                    img: item.img,
                    qty: 1,
                    brief: "",
                    inventory: res.qty
                })
            })
        }
    })
    oo_item_data.value = tableData.value
})


const formSubmit = () => {

    let ooMaster = {
        ooDate: formData.ooDate,
        ooType: formData.ooType,
        brief: formData.brief,
        items: tableData.value
    }
    //保存单据
    ooApi.insert.call(ooMaster).then((res: any) => {
        ElMessage.success("出库成功")
        tableData.value = []
        oo_item_data.value = []
    })
    console.log(ooMaster)
    tableData.value = []
    oo_item_data.value = []
}

const submitForm = () => {
    if (tableData.value.length === 0) {
        ElMessage.error("至少选择一个商品")
        return
    }
    formSubmit()
}
</script>